<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head th:replace="main :: common_head">

</head>
<style>
    [v-cloak] {
        display: none;
    }
</style>

<body>
<div id="app">
    <div id="hidden-graph-id" hidden th:text="${graphId}"></div>
    <div class="container-fluid-full">
        <div class="row-fluid">
            <noscript>
                <div class="alert alert-block span10">
                    <h4 class="alert-heading">Warning!</h4>
                    <p>You need to have <a href="" target="_blank">JavaScript</a> enabled to use this site.</p>
                </div>
            </noscript>

            <!-- start: Content -->
            <div id="content" class="span10" style="width: 100%;">
                <ul class="breadcrumb" th:if="${#request.getParameter('breadcrumb') == 'true'}">
                    <li>
                        <i class="fas fa-circle-notch"></i>
                            <a id="home" href="#" onclick="parent.location.reload()">主页</a>
                        <i class="icon-angle-right"></i>
                    </li>
                    <li><a href="#">电价</a></li>
                </ul>
                <div class="row-fluid sortable">
                    <div class="box span12">
                        <div class="box-header" data-original-title>
                            <h2><i class="halflings-icon white edit"></i><span class="break"></span>电价</h2>
                            <div class="box-icon">
                                <!--<a href="#" class="btn-setting"><i class="halflings-icon white wrench"></i></a>-->
                                <!--<a href="#" class="btn-minimize"><i class="halflings-icon white chevron-up"></i></a>-->
                                <!--<a href="#" class="btn-close"><i class="halflings-icon white remove"></i></a>-->
                            </div>
                        </div>
                        <div class="box-content" style="position:relative">
                            <form class="form-horizontal">
                                <fieldset style="min-height: 300px;">
                                    <!--提示开始：high为峰段时间段-->
                                    <div id="notice" style="position:absolute; top:84px; left: 600px; font-size:14.5px" v-cloak>
                                        <p style="margin-top: 10px;">提示:</p>
                                        <p>峰段（{{priceDetails.high}})</p>
                                        <p>谷段（{{priceDetails.low}}）</p>
                                        <p>平段（{{priceDetails.mid}})</p>
                                    </div>
                                    <div class="box-content" >
                                        <div class="container" style="margin-left: 66px; width: 100%">
                                            <ul id="mytab" class="nav nav-pills nav-justified">
                                                <li class="dropdown" v-cloak>
                                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"@click="dropdown" style="text-decoration: none;cursor:pointer;border:1px solid black">
                                                        {{initGraph.graphName}}<span class="caret"></span>
                                                    </a>
                                                    <ul class="dropdown-menu" v-show="flag">
                                                        <li v-for="graph in graphInfos" role="presentation">
                                                            <a v-on:click="getPriceByGraphId(graph)" style="text-decoration: none;cursor:pointer;">{{graph.graphName}}</a>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!--提示结束-->
                                    <div class="control-group" v-for="price in priceDetails.prices" v-cloak>
                                        <label class="control-label">{{price.startTime}} - {{price.endTime}}</label>
                                        <div class="controls">
                                            <span class="input-xlarge uneditable-input">{{price.price}}</span>
                                        </div>
                                    </div>
                                    <div v-show="isPriceDetailsNull" style="width: 100%;height: 60px;"></div>
                                    <div class="form-actions">
                                        <a :href="'/multipower/electricity/editElePrice/' + initGraph.graphId + params"
                                           class="btn btn-primary">修改</a>
                                        <br><br>
                                        <p v-show="isPriceDetailsNull" style="color: red" v-cloak>该图谱无对应电价，请添加</p>
                                    </div>
                                </fieldset>
                            </form>
                        </div>
                    </div><!--/span-->
                </div><!--/row-->
            </div>
        </div>
    </div>


    <div class="modal hide fade" id="myModal">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h3>Settings</h3>
        </div>
        <div class="modal-body">
            <p>Here settings can be configured...</p>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn" data-dismiss="modal">Close</a>
            <a href="#" class="btn btn-primary">Save changes</a>
        </div>
    </div>

    <div class="common-modal modal fade" id="common-Modal1" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-content">
            <ul class="list-inline item-details">
                <li><a href="http://sc.chinaz.com">Admin templates</a></li>
                <li><a href="http://sc.chinaz.com">Bootstrap themes</a></li>
            </ul>
        </div>
    </div>

    <div class="clearfix"></div>

    <div th:replace="main::common_js"></div>

</div>
</body>

<script th:src="@{/js/detect-element-resize.js}"></script>
<script th:src="@{/js/iframe-resize.js}"></script>
<!--<script th:src="@{/js/jquery-1.9.1.min.js}"></script>-->
<script th:inline="javascript" th:src="@{/js/vue.min.js}"></script>

<script th:inline="javascript">
    //<![CDATA[
    var vm = new Vue({
        el: '#app',
        created: function () {
            graphId = document.getElementById("hidden-graph-id").innerText
            url = "/multipower/electricity/viewGraphInfo"
            if (graphId != undefined && graphId != "") {
                url = url + "?graphId=" + graphId
            }

            that = this
            $.ajax({
                type: "GET",
                url: url,
                dataType: "json",
                async: true,
                success: function (data) {
                    that.graphInfos = data.allGraphInfo
                    that.graphId = data.graphId
                    data.allGraphInfo.forEach(function (elem) {
                        if (elem.graphId == that.graphId) {
                            that.initGraph = elem
                            that.getPriceByGraphId(elem)
                        }
                    })
                }
            })
        },
        mounted: function() {
            var dom = parent.document.getElementById("hasBreadcrumb")
            if (dom != null && dom.value == 'true') {
                this.params = "?breadcrumb=true"
            }
            parent.modifyTitle('电价管理')
        },
        data: {
            initGraph: {},
            graphInfos: [],
            isPriceDetailsNull: false,
            priceDetails: {
                "low": "",
                "mid": "",
                "high": "",
                "prices": [
                    {
                        "startTime": "",
                        "endTime": "",
                        "price": ""
                    },
                ]
            },
            params: "",
            graphId: "",
            flag: true //下拉列表是否显示的指标
        },
        methods: {
            dropdown: function (){
                that = this
                that.flag = true
            },
            getPriceByGraphId: function (data) {
                that = this
                that.initGraph = data
                that.flag = !that.flag
                $.ajax({
                    type: "POST",
                    url: "/multipower/electricity/autoUpdateEleType/" + data.graphId,
                    dataType: "json",
                    async: false,
                    success: function () {

                    }
                })
                $.ajax({
                    type: "GET",
                    url: "/multipower/electricity/viewPriceByGraphId/" + data.graphId,
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        console.log(data)
                        if (data.msg == undefined) {
                            that.priceDetails = data
                            that.isPriceDetailsNull = false
                        } else {
                            that.isPriceDetailsNull = true
                            that.priceDetails = {
                                "low": "",
                                "mid": "",
                                "high": "",
                                "prices": [
                                    {
                                        "startTime": "",
                                        "endTime": "",
                                        "price": ""
                                    },
                                ]
                            }
                        }
                    }
                })
            }
        }
    })
    //]]>
</script>

<script>

</script>

<!--<script>-->
<!--    $($event.currentTarget).closest(".dropdown").removeClass("open");-->
<!--</script>-->
</html>
